<script lang="ts" setup>
import {h, reactive, watch} from 'vue';
import {FolderOpenOutlined} from "@ant-design/icons-vue"
import util from "@/utils/util";


let loaded = false;
//分类处理
let config = reactive({
  common: {},
  service:[],
  php:[]
})

async function getExePath() {
 let path =  await aardio.getPath()
  if(path){
    (config.common as Config.Common).editor = path
  }
}
//获取已安装服务与php
async function getInstalled() {
  let res = await util.remote<Config.All>('config')
  return res.common;
}
async function getCommonConfig() {
  let res = await util.remote<Config.All>('config')
  return res.common;
}
async function loadConfig() {
  config.common = await getCommonConfig();
  setTimeout(()=>{
    loaded = true
  },10)
}
loadConfig()

watch(config,(newval,oldval)=>{
  if(loaded){
    console.log('watch',newval.common);
    util.remote('syncConfig',JSON.stringify(newval.common))
  }
})

</script>

<template>
  <div style="padding: 12px;">
    <a-space direction="vertical" size="middle" style="width: 100%">
      <a-card title="一键启动和停止" size="small" style="width: 100%">
        <div style="display: flex;align-items: center">
          <span>服务列表：</span>
          <a-select
              v-model:value="config.common.service"
              mode="multiple"
              style="width: 75%"
              placeholder="Please select"
              :options="config.service"
          ></a-select>
        </div>
      </a-card>

      <a-card title="其他" size="small" style="width: 100%">
        <div style="display: flex;align-items: center">
          <span >文本编辑器：</span>
          <a-input-search
              style="width: 75%"
              v-model:value="config.common.editor"
              placeholder="input search text"
          >
            <template #enterButton>
              <a-button @click="getExePath" :icon="h(FolderOpenOutlined)"></a-button>
            </template>
          </a-input-search>
        </div>
        <div style="display: flex;align-items: center;margin-top: 12px;">
          <a-switch v-model:checked="config.common.reset_web" />
          <span style="margin-left: 12px;">新增，修改网站后重启WEB服务</span>
        </div>
        <div style="display: flex;align-items: center;margin-top: 12px;">
          <a-switch v-model:checked="config.common.reset_php" />
          <span style="margin-left: 12px;">新增，修改网站后重启对应的PHP-FPM</span>
        </div>
      </a-card>
      <a-card title="环境变量" size="small" style="width: 100%">
        <div style="display: flex;align-items: center;">
          <a-switch v-model:checked="config.common.enable_env" />
          <span style="margin-left: 12px;">启用环境变量</span>
        </div>
        <a-row style="margin-top: 12px;">
          <a-col span="12">
            <div style="display: flex;align-items: center">
            <span>PHP-CLI版本：</span>
            <a-select
                v-model:value="config.common.php_cli_ver"
                style="width: 50%"
                placeholder="Please select"
                :options="config.php"
            ></a-select>
          </div></a-col>
          <a-col span="12">123</a-col>
        </a-row>
      </a-card>


    </a-space>

  </div>
</template>
